<template>
  <div class="add-device base-main">
    <!--内容-->
    <div class="content">
        <pull-up-reload
          :on-infinite-load="onInfiniteLoad"
          :parent-pull-up-state="infiniteLoadData.pullUpState"
          style="padding-bottom: 0px;">
          <ul>
            <van-checkbox-group v-model="result">
              <li
                v-for="(item, index) in deviceList"
                :key="index"
                :class="index === deviceList.length - 1 ? '' : 'line-bottom'"
                class="pr"
                @click="toggle(index)"
              >
                <p class="inline-block w80 fs14 color45454D">{{item.name}}</p>
                <p class="inline-block w80 fs12 color7A7B82">所属网点： 无</p>
                <van-checkbox
                  class="flr inline-block pa"
                  ref="checkboxes"
                  :name="item.id"
                  slot="right-icon"
                />
              </li>
            </van-checkbox-group>
          </ul>
        </pull-up-reload>
    </div>

    <!--添加-->
    <base-bottom-btn
      @hasClick="handleSub"
      :txt="btnTxt"
    />
  </div>
</template>

<script type="text/ecmascript-6">
  import baseBottomBtn from '../../components/BaseBottomBtn'
  import PullUpReload from '../../components/PullUpReload.vue'
  export default {
    components: {
      baseBottomBtn,
      PullUpReload
    },
    data() {
      return {
        btnTxt: '确定',
        page:0,
        deviceList: [
          {
            id: 1,
            name: '1号设备'
          },
          {
            id: 2,
            name: '2号设备'
          },
          {
            id: 3,
            name: '3号设备'
          }
        ],
        result: [],
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    methods: {
      toggle(index) {
        let checkboxesDom = this.$refs.checkboxes[index];
        let resultArr = this.result;
        checkboxesDom.toggle();
        checkboxesDom.checked ?
          resultArr.splice(resultArr.indexOf(checkboxesDom.name),1) : resultArr.push(checkboxesDom.name)
        this.result = resultArr
      },
      handleSub() {
        console.log('sub');
        console.log(this.result);
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      }
    },
  }
</script>

<style scoped>
  @import "../../assets/css/base.scss";
.add-device{}
.add-device .content ul li{height:60px;padding:12px 15px; box-sizing: border-box;}
.add-device .content ul li .van-checkbox{top: 50%;right: 15px;transform: translateY(-50%);}
</style>
